<template>
	<view>
		<view :style="{ height, paddingTop: paddingTop + 'rpx'}"></view>
		<view :style="{
			paddingTop: paddingTop + 'rpx',
			background
		}" class="x-fixed-bottom">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			paddingTop: {
				type: String,
				default: '0'
			},
			background: {
				type: String,
				default: '#FFFFFF'
			}
		},
		data() {
			return {
				height: '0rpx'
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.query('.x-fixed-bottom').then(data => {
					this.height = (data.height) + 'px'
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.x-fixed-bottom {
		width: 100%;
		bottom: 0upx;
		position: fixed;
		z-index: 10202;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
	}
</style>
